$(function() {
    $(".nav_ a").mouseover(function() {

        $(this).css("background", "rgb(237, 20, 117)").siblings().css("background", "")
    })
    $(".nav_ a").mouseout(function() {

        $(this).css("background", "")
    })
    $(".top a").click(function() {
        $(this).addClass("active").siblings().removeClass("active")

    })

    $(".header_top_left .logo").hover(function() {
        console.log(666);
        $(this).css("color", "red").siblings().css("color", "")
    }, function() {
        $(this).css("color", "")
    })

    $(".many-option-dl-dd a").mouseover(function() {
        $(this).css({
            color: "rgb(237, 20, 117)",
            border: "1px solid rgb(237, 20, 117)"
        }).siblings().css({
            color: "",
            border: ""
        })
    })
    $(".many-option-dl-dd a").mouseout(function() {
        $(this).css({
            color: "",
            border: ""
        })
    })
    $(".botton a").mouseover(function() {
        $(this).css("color", "orange").siblings().css("color", "")
    })
    $(".botton a").mouseout(function() {
        $(this).css("color", "")
    })

    $(".page button").hover(function() {

        $(this).css({
            background: "rgb(237, 20, 117)",
            color: "white"
        }).siblings().css({
            background: "",
            color: ""
        })
    }, function() {
        $(this).css({
            background: "",
            color: ""
        })
    })
})





let page = 1; //第几页
let shownum = 30; //每页显示的数量
let total = 1000; //数据总数
let showpage = 5; //连续出现的页码数
let allPage = Math.ceil(total / shownum); //最大页码

$("#prev,#next").prop("disabled", true);

let nextFn = function() {
    $("#next").prop("disabled", true);
    page++;
    search();
}
let prevFn = function() {
    $("#prev").prop("disabled", true);
    page--;
    search();
}




search();

function search() {
    $.ajax({
        type: "get",
        url: "../php/goodslist.php",
        data: {
            page: page,
            shownum: shownum
        },
        dataType: "json",
    }).then(res => { //res是一个对象
        let html = "";
        res.list.forEach(info => { //info就是集合中的每一个对象
            let {
                id,
                goodsname,
                goodsnum,
                goodsprice,
                goodsimg
            } = info;
            html += ` <div class="item" data-id="${id}"> 

            <img src="${goodsimg}">
            <p>${goodsname}</p>
            <span>${goodsprice}</span> 
            <a href="">${goodsnum}</a> 
        </div> `;
        });
        //一定要循环完成
        $(".list").html(html);
        total = res.count; //获取数据总数
        allPage = Math.ceil(total / shownum) //28/5   6


        //第一页的上一页不能点
        //最后一页 下一页不能点

        $("#prev,#next").prop("disabled", true);

        if (page != 1) { //1表示第一个页
            $("#prev").prop("disabled", false);
            $("#prev").off("click", prevFn);
            $("#prev").on("click", prevFn)
        }
        if (page != allPage) {
            $("#next").prop("disabled", false);
            $("#next").off("click", nextFn);
            $("#next").on("click", nextFn);

        }

        setPage(); //设置分页效果

    })

}


function setPage() {
    //第一步写死的

    let start = 1; //起点
    let end = showpage; //终点  5 
    let middleNum = Math.ceil(showpage / 2); //5 /2    3

    //计算
    end = allPage > showpage ? showpage : allPage;



    if (page > middleNum) { //说明页码到了中间  4
        start = page - middleNum + 1; // 4 - 3 +1  2
        end = page + middleNum - 1; //4+3-1   6
    }

    if (page > allPage - middleNum) { //> 14-4  说明到了末端
        start = allPage - showpage + 1; // 14 - 7 = 7?
        end = allPage;
    }

    start = start < 1 ? 1 : start;

    //  $(".page .contain").empty();//清空
    let html = "";
    for (let i = start; i <= end; i++) {
        if (page == i) {
            html += `<div class="item active" >${i}</div>`;
        } else {
            html += `<div class="item">${i}</div>`;
        }
    }
    $(".page .contain").html(html);





}




$(document).on("click", ".page .item", function() {
    page = $(this).html() - 0;
    //要去获取数据
    search();
})

$(document).on("click", "#home_page", function() {
    page = 1;

    search();
})

$(document).on("click", "#trailer_page", function() {
    console.log(666);
    page = allPage;
    console.log(allPage);

    search();
})



$(document).on("click", "#seek", function() {


    page = $("#inp").val()

    console.log(page);
    search()
})

$(document).on("click", ".list .item", function() {

    window.location.href = "datail.html?id=" + $(this).attr("data-id")
})